<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/icon/iconfont.css">
    <link rel="stylesheet" href="./css/icon/iconfont.ttf">
    <title>27-文件后台管理UI</title>
</head>

<body>
    <div class="bg flex">
        <div class="box_border">
            <div class="box">

                <!-- 左边 -->
                <div class="leftBox float">
                    <h2>MyDocs</h2>
                    <ul>
                        <li>
                            <span class="iconfont icon-menu-line"></span>
                        </li>
                        <li>
                            <span class="iconfont icon-wenjianjia_o"></span>
                        </li>
                        <li>
                            <span class="iconfont icon-yunyingpan"></span>
                        </li>
                        <li>
                            <span class="iconfont icon-shezhi"></span>
                        </li>
                    </ul>
                    <div class="fh">
                        <span class="iconfont icon-buoumaotubiao08"></span>
                    </div>
                </div>

                <!-- 中间 -->
                <div class="contBox float">
                    <div class="SearchBox flex">
                        <div class="inputBox">
                            <input class="float" type="search" placeholder="e.g.files.doc">
                            <span class="iconfont icon-sousuo float"></span>
                        </div>
                    </div>
                    <div class="QuickBox">
                        <h2>Quick Access</h2>
                        <div class="gridBox">
                            <ul>
                                <li>
                                    <div class="iconBox">
                                        <span class="iconfont icon-tupian"></span>
                                    </div>
                                    <p>Images</p>
                                </li>
                                <li>
                                    <div class="iconBox">
                                        <span class="iconfont icon-yinle"></span>
                                    </div>
                                    <p>Music</p>
                                </li>
                                <li>
                                    <div class="iconBox">
                                        <span class="iconfont icon-bofang"></span>
                                    </div>
                                    <p>Video</p>
                                </li>
                                <li>
                                    <div class="iconBox">
                                        <span class="iconfont icon-24gl-textAlignRight
                                        .icon-24gl-textAlignRight"></span>
                                    </div>
                                    <p>Docs</p>
                                </li>
                                <li>
                                    <div class="iconBox">
                                        <span class="iconfont icon-ios-apps .icon-ios-apps"></span>
                                    </div>
                                    <p>Apps</p>
                                </li>
                                <li>
                                    <div class="iconBox">
                                        <span class="iconfont icon-xiazai"></span>
                                    </div>
                                    <p>Download</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="PreviewBox">
                        <div class="title">
                            <span>Preview</span>
                            <span>View in follders</span>
                        </div>
                        <ul>
                            <li>
                                <div class="time">
                                    10:32
                                </div>
                                <div class="titleBox">
                                    <div class="titleText">
                                        <div class="name">
                                            Happiness & Tears
                                        </div>
                                        <div class="size">
                                            45.5 MB
                                        </div>
                                    </div>
                                    <div class="play flex">
                                        <span class="iconfont icon-bofang"></span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="time">
                                    02:35
                                </div>
                                <div class="titleBox">
                                    <div class="titleText">
                                        <div class="name">
                                            High Hopes
                                        </div>
                                        <div class="size">
                                            50 MB
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="time">
                                    04:15
                                </div>
                                <div class="titleBox">
                                    <div class="titleText">
                                        <div class="name">
                                            Imaginery you
                                        </div>
                                        <div class="size">
                                            210.2 MB
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="RecentBox">
                        <div class="title">
                            <span>Recent Files</span>
                            <span>View all files</span>
                        </div>
                        <div class="fileBox">
                            <table>
                                <tr>
                                    <th width="250px">Name</th>
                                    <th width="150px">Size</th>
                                    <th width="150px">Last Modified</th>
                                    <th width="150px">Action</th>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="filesType">PDF</div>
                                        <span>Brandenburg.pdf</span>
                                    </td>
                                    <td>42 MB</td>
                                    <td>Aug 26.2020</td>
                                    <td>...</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="filesType">JPG</div>
                                        <span>TheLionsRoar.jpg</span>
                                    </td>
                                    <td>500 KB</td>
                                    <td>Aug 26.2020</td>
                                    <td>...</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 右边 -->
                <div class="rightBox float">
                    <div class="DownloadsBox">
                        <h2>Downloads</h2>
                        <span>...</span>
                    </div>
                    <div class="TodayBox">
                        <p class="title">Today</p>
                        <div class="fileBox">
                            <div class="leftIcon">
                                <span class="iconfont icon-24gl-fileText"></span>
                            </div>
                            <div class="textBox">
                                <p>Glitter.mp4</p>
                                <p>34.45 MB Waiting for do...</p>
                            </div>
                            <div class="rightIcon">
                                <span class="iconfont icon-xiazai"></span>
                            </div>
                        </div>
                    </div>
                    <div class="Yesterday">
                        <p class="title">Yesterday</p>
                        <div class="fileBox">
                            <div class="leftIcon">
                                <span class="iconfont icon-24gl-fileText"></span>
                            </div>
                            <div class="textBox">
                                <p>Glitter.mp4</p>
                                <div>
                                    <span></span>
                                </div>
                            </div>
                            <div class="rightIcon">
                                <span class="iconfont icon-xiazai"></span>
                            </div>
                        </div>
                    </div>
                    <div class="FileReceived">
                        <h2>File Received</h2>
                        <div class="photoBox">
                            <div class="rightBox_FR">
                                <div class="timeBox">
                                    <div class="yuan"></div>
                                    <p class="time">15:30</p>
                                </div>
                                <div class="imgBox">
                                    <div>
                                        <img src="./images/image4.jpg" alt="">
                                    </div>
                                    <div>
                                        <img src="./images/image4.jpg" alt="">
                                    </div>
                                    <div>
                                        <img src="./images/image4.jpg" alt="">
                                    </div>

                                </div>
                                <div class="title">
                                    <p>Received
                                        <span>3 images</span> total <span>503 MB</span>
                                    </p>
                                </div>
                                <div class="timeBox bottonTime">
                                    <div class="yuanTop"></div>
                                    <p class="time">18:30</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>